<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>web06</title>
		<meta name="author" content="ch choongang" />
		<!-- <link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumBrushWeb'
        rel='stylesheet' type='text/css' /> -->
        
		<style>
			body{padding: 20px; background-color: #333333;}
			a.banner{display:  block;
				width:728px; height:176px;
				border: 10px bold #555;
				/* p94 배경그림 3개를 동시에 적용하기 */
				/* left:-200이면 그림이 왼쪽으로 뻐져서 보이지 않는다 */
				background: 
					url(haein57.jpg) no-repeat -270px 180px,
					url(line.jpg) no-repeat -40px 220px,
					url(pinkline.jpg) no-repeat -20px -380px;
				/* 시간:background-position 에만 시간을 적용 */
				/* 0.6초 동안 변화, 변 가속도, 대기시간 */
				transition:background-position .6s ease-in .2s;
				/* 모든 브라우저에서 똑같이 되도록 벤더 프리픽스 */
					-moz-transition:background-position .6s ease-in .2s;
					-webkit-transition:background-position .6s ease-in .2s;
					-o-transition:background-position .6s ease-in .2s;
					-khtml-transition:background-position .6s ease-in .2s;
					-ms-transition:background-position .6s ease-in .2s;
				position: relative;
			}
			/* p96 position */
			a.banner .banner-logo{
				position: absolute; top:20px; left:270px;
				transition-property: left;
				transition-duration: .2s;
				transition-timing-function: ease-out;
				transition-delay: .3s;
					-moz-transition: left 1.0s ease-out .3s;
					-webkit-transition:  left 1.0s ease-out .3s;
				
			}
			a.banner .banner-desc{
				font: 39px/0.9 "NanumPenWeb", "나눔 손글씨 펜", "Nanum Pen Script";
				/* 속기형, short cut */
				/* 글꼴을 반드시 지정해야 합니 */
				/* 39px/0.9 39px는 글자 크기, 0.9는 행간 */
				position: absolute;
				top:35px; left:179px;
				color:#43c1cd;
				opacity: 0;
			}
			div{font-family: 'NanumBrushWeb';
				fornt-size:2em;
				color: white;}
				
			a.banner:hover, a.banner:focus {
				background-position: 
					20px 10px,
					450px 5px,
					-20px -90px;
			}
			a.banner:hover .banner-desc,
			a.banner:focus .banner-desc{
				opacity: 1;
			}
			a.banner:hover .banner-logo,
			a.banner:focus .banner-logo{
				left:480px;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
		<script src="bannerAudio.js">
		<!-- <script src="js/jquery.banner_sound.js"></script> -->
		<script type="text/javascript">
			(function($){
				$(function(){
					$(' .banner').banner_sound('media/ogg.ogv');
				});
			})(jQuery);
		</script>
	</head>
	<body>
		<a class="banner" href="05.html">
			<p class="banner-logo">웹표준 <br>
				<strong>w3schools.com</strong></p>
		</a>
		<div> 웹 폰트 사용하기 </div>
		<video controls> 
  			<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> 
  			<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> 
  			<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  			<source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
		</video>
	</body>
</html>